<template>
    <div class="app-container">
      <!-- 表单区域 -->
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="相关领域">
              <el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
                <el-option
                  v-for="item in nj_anjian_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来访类别">
              <el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
                <el-option
                  v-for="item in nj_anjian_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="级别">
              <el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
                <el-option
                  v-for="item in nj_anjian_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="getLists">
                <el-icon class="me-1">
                  <Search />
                </el-icon>
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleRest(queryParamsRef)">
                <el-icon class="me-1">
                  <Refresh />
                </el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider class="mt-0" />
  
      <el-row class="mb-3" :gutter="10">
        <el-col :span="1.5">
          <el-space>
            <el-button plain type="primary" @click="AddEditRegistVisitRef.showAddCase()">
              <el-icon class="me-2">
                <Plus />
              </el-icon>
              新增
            </el-button>
          </el-space>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="Upload" @click="uploadRef.showupload()">导入</el-button>
          <Upload ref="uploadRef" @getList="getLists" />
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>
  
      <!-- 表格区域 -->
      <el-table
        ref="CaseTableRef"
        v-loading="loading"
        :data="CaseTables"
        @row-dblclick="handleRowDblClick"
        show-overflow-tooltip
      >
        <el-table-column label="日期" prop="name" />
        <el-table-column label="上访人" prop="name" />
        <el-table-column label="电话" prop="casetype" />
        <el-table-column label="身份证号码" prop="unitname" />
        <el-table-column label="反映事项" prop="state">
          <template #default="scope">
            <dict-tag :options="nj_anjian_status" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column label="是否重点对象" prop="state">
          <template #default="scope">
            <dict-tag :options="nj_anjian_status" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column label="级别" prop="state" width="80">
          <template #default="scope">
            <dict-tag :options="nj_anjian_status" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column label="处理情况" prop="depname"/>
        <el-table-column fixed="right" align="center" label="操作" width="240">
          <template #default="scope">
            <!-- <el-button link size="small" type="warning">
              <el-icon class="me-1">
                <UserFilled />
              </el-icon>
              上访人管理
            </el-button> -->
            <el-button link size="small" type="primary" @click="AddEditRegistVisitRef.showEditCase(scope.row)">
              <el-icon class="me-1">
                <Edit />
              </el-icon>
              编辑
            </el-button>
            <el-button link size="small" type="warning" @click="AddEditRegistVisitRef.showEditCase(scope.row)">
              <el-icon class="me-1">
                <Edit />
              </el-icon>
              详情
            </el-button>
            <el-button link size="small" type="danger" @click="deleteCase(scope.row)">
              <el-icon class="me-1">
                <Delete />
              </el-icon>
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="paging.pageNum"
        v-model:limit="paging.pageSize"
        @pagination="getLists"
      />
      <AddEditRegistVisit ref="AddEditRegistVisitRef" @getList="getLists" />
    </div>
  </template>
  
  <script setup>
  import { ElMessageBox } from "element-plus";
  import AddEditRegistVisit from "./components/AddEditRegistVisit.vue";
  import Upload from "./components/upload.vue"; // 引入上传组件
  import { getCurrentInstance } from "vue";
  
  import PageEnum from "@/enum/PageEnum.js";
  
  const { proxy } = getCurrentInstance();
  const { nj_anjian_type, nj_anjian_status } = proxy.useDict("nj_anjian_type", "nj_anjian_status");
  
  const isShow = ref(true);
  const queryParamsRef = ref();
  const deleteStatus = ref(true);
  const AddEditRegistVisitRef = ref();
  const uploadRef = ref();
  const upload = ref({});
  
  const loading = ref(false);
  
  const paging = ref({
    pageNum: 1,
    pageSize: PageEnum.SIZE,
  });
  const queryParams = ref({
    name: "",
    casecode: "",
    brief: "",
    state: "1,2",
  });
  
  const total = ref(0);
  const CaseTables = ref([
    {
      name: "1",
    },
    {
      name: "2",
    },
  ]);
  
  onMounted(() => {
    getLists();
  });
  
  // 获取案件列表
  const getLists = async () => {
    // loading.value = true
    // await getCaseInfoList(queryParams.value, paging.value).then(res => {
    //     CaseTables.value = res.rows
    //     total.value = res.total
    //     loading.value = false
    // })
  };
  
  // 双击行时的事件处理函数
  const handleRowDblClick = (row) => {
    console.log("双击的行数据：", row);
    AddEditRegistVisitRef.value.showAddCase(row)
    // 在这里可以进行进一步的处理，比如打开编辑框或查看详情等
  };
  
  const deleteCase = async (row) => {
    ElMessageBox.confirm("确定删除？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // deleteCaseInfo(row.caseCaseinfoId).then((res) => {
        //   getLists();
        // });
      })
      .catch(() => {});
  };
  
  /** 导出按钮操作 */
  function handleExport() {
    // proxy.download("system/user/export", {
    //     ...queryParams.value,
    // }, `user_${new Date().getTime()}.xlsx`);
  }
  // 重置搜索调解
  const handleRest = (formEl) => {
    queryParams.value = {
      name: "",
      casecode: "",
      brief: "",
      state: "1,2",
    };
    getLists();
  };
  </script>
  
  <style lang="scss" scoped></style>
  